<%@ page language="java" import="java.util.*,cat.beans.*,cat.dao.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
  <head>
   <base href="<%=basePath%>">
    <title>商品管理</title>
	<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
	<script type="text/javascript">
		$(function(){
			$("#ch_checkall").click(function(){
				if($("#ch_checkall").attr("checked")=="checked"){
					$("input[name=ck_id]").attr("checked","checked");
				}else{
					$("input[name=ck_id]").removeAttr("checked");
				}		
			});
			
			
			$("table tr").mouseover(function(){
				$(this).css("background","#D3EAEF");
				$(this).siblings().css("background","white");
			});
		});
		
		//初始化下拉框
		$(function(){
			$("#bigCateId").change(function(){
				if(this.value=="0"){
					$("#smallCateId").html("<option value='0'>小分类</option>");
					return;
				}
				$.ajax({
					url:"${pageContext.request.contextPath}/CateServlet.do",
					type:"POST",
					async:false,
					dataType:"json",
					data:{bigcateid:this.value,flag:"listsmallcate"},
					success:function(cateList){
						$("#smallCateId").empty();
						$.each(cateList,function(key,cateInfo){
							var optionStr="<option value='"+cateInfo.id+"'>"+cateInfo.cateName+"</option>";
							$("#smallCateId").append(optionStr);
						});
						
						
					}
				});
			
			});
			
			//如果是页面回发,要让列表框选中原来选中的值(在ie6中还有 一些问题,要进行处理)
			$("#bigCateId").val("${param.bigCateId}");
			$("#bigCateId").change();
			$("#smallCateId").val("${param.smallCateId}");

		});
		
		//根据已有元素,取得它的坐标	
		function getElemPos(obj) {
			var pos = {
				"top" : 0,
				"left" : 0
			};
			if (obj.offsetParent) {
				while (obj.offsetParent) {
					pos.top += obj.offsetTop;
					pos.left += obj.offsetLeft;
					obj = obj.offsetParent;
				}
			} else if (obj.x) {
				pos.left += obj.x;
			} else if (obj.x) {
				pos.top += obj.y;
			}
			
			return {
				x : pos.left,
				y : pos.top
			};

		}

		//显示商品图片div
	/* 	function showDetails(item, picture, desc) {
			var position = getElemPos(item);
			$("#div_goods_detail").show();
			$("#div_goods_detail").css("left", position.x - 150).css("top",
					position.y);

			$("#goods_picture").attr("src","${pageContext.request.contextPath}/images/upload_goodsimgs/"+ picture);
			$("#div_imgdesc").html("<center>" + desc + "</center>");
		} */
		
		function showDetails(item, goodsId, desc) {
			var position = getElemPos(item);
			$("#div_goods_detail").show();
			$("#div_goods_detail").css("left", position.x - 150).css("top",
					position.y);

		//	$("#goods_picture").attr("src","${pageContext.request.contextPath}/goods/picture.jsp?goodsId="+goodsId);
			$("#goods_picture").attr("src","${pageContext.request.contextPath}/GoodsServlet.do?flag=showPicture&goodsId="+goodsId);
			$("#div_imgdesc").html("<center>" + desc + "</center>");
		}
		

		//隐藏商品图片div
		function hideDetails() {
			$("#div_goods_detail").hide();
		}
	</script>

	<script>
		function subForm(pageIndex)
		{
		    //pageIndex 不传入,表示,是点击"转到"按钮的时候触发的
		    if(pageIndex){
		    	$("#pageIndex").val(pageIndex);
		    	document.form1.submit();
		    }
		    else{
		    	document.form1.submit();
		    }	
		}
		
		//点击上方的删除按钮,进行多项删除
		function delMuti(){
			//判断用户至少选了一项
			if($("input[name=ck_id]:checked").size()==0){
				alert("请至少选一项!");
			}
			else{
				if(confirm('确定要删除所选项吗')){	
					alert("此功能沿未完成!");
				}
				
			}
		}
		
		//点周删除按钮,删除单条商品
		function del(goodsId){
			if(confirm('确定要删除该商品吗')){
			 	window.location.href="${pageContext.request.contextPath}/GoodsServlet.do?flag=del&goodsId="+goodsId;
			}
		}
	</script>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/maintable.css" ></link>
    <style>
    	.div_tools{
    		width:99.5%; 
			height:28px;
			background:#D3EAEF;
			margin:0px auto;
			margin-top:5px;
			margin-bottom:5px;
			font-size:12px;
			position:relative;	 
			
    	}
    	
    	.div_tools select{
    		height:22px;
    		font-size:12px;
			margin-top:3px;
    	}
    	
    	#btnsubmit{
    		width:40px;
    		height:20px;
    		font-size:12px;
    	}
    	
    	/*显示图片*/
    	#div_goods_detail{
    		display:none;
    		position: absolute;
    	}
    </style>

  </head>
  
  <body>

				<div class ="div_title">
						<div class="div_titlename"> <img src="images/san_jiao.gif" ><span>商品列表</span></div>
						<div class="div_titleoper">
						<input type="checkbox"  /> 
						全选 <a href="#"> <img src="images/add.gif"/>添加 </a> 
							<a href="javascript:delMuti()"><img src="images/del.gif"/>删除</a> 
							<a href="#">  <img src="images/edit.gif"/>编辑 </a>
						</div>
				 </div>
				 <form action="${pageContext.request.contextPath}/GoodsServlet.do?flag=manage" method="post" name="form1">
				 <div class ="div_tools">
				 	 &nbsp; &nbsp; &nbsp;
				 	 
				 	 <%
		 				List<CateInfo> cateList=new CateDao().getCateList(0); 
		 				request.setAttribute("cateList", cateList);
		 			 %>
		 			 
					  <select name="bigCateId" id="bigCateId">
			 						<option value="0">大分类</option>
			 						<c:forEach var="cate" items="${cateList}">
			 							<option value="${cate.id }" >${cate.cateName }</option>
			 						</c:forEach>
			 		 </select>
				 	&nbsp;
				 	<select name="smallCateId" id="smallCateId">	
				 		<option value="0">小分类</option>  
				 	</select>
				 	   &nbsp;  &nbsp;  &nbsp;商品名称: <input type="text" name="goodsName" value="${param.goodsName }"></input>
				 	<input id="btnsubmit" type="submit"  value="查询" />
				 </div>
				
				 <input type="hidden" name="flag" value="delAdmins" />
				 <table class="main_table" >
				       <tr>
				 				<th><input type="checkbox" id="ch_checkall" /></th>	
				 				<th>名称</th> 	
				 				<th>单位</th>  
				 				<th>单价</th> 
				 				<th>大分类</th> 
				 				<th>小分类</th> 
				 			<!-- 	<th>说明</th>  -->
				 				<th>操作</th>
				 		</tr>
				 		<c:forEach var="goods" items="${goodsList}">
				 		<tr>
				 				<td>
				 					<input type="checkbox" name="ck_id" value="${goods.id}" /> 
				 				</td>
				 				<td>${goods.goodsName }</td>	
				 		
				 				<td>${goods.unit }</td>	
				 				
				 				<td>${goods.price }</td>	
				 				<td>${goods.bigCateName }</td>
				 				<td>${goods.smallCateName }</td>
				 			<%-- 	<td>${goods.des }</td> --%>
				 				
				 				<td>
					 				<a href="javascript:void(0)" 
					 					onmouseover="showDetails(this,'${goods.id }','${goods.des }')"
					 					onmouseout="hideDetails()"
					 				>查看</a> |  

					 				<a href="${pageContext.request.contextPath }/goods/goods_edit.jsp?goodsId=${goods.id }">修改</a> |  
					 							
					 			    <a href="javascript:del(${goods.id })">删除</a> 

				 				</td>
				 		</tr>
				   		 </c:forEach>
				 	
				</table>
				
				
				
				<div class="div_page" >
					  <div class="div_page_left">    共有 <label>${pageInfo.rowCount }</label> 条记录，当前第 <label>${pageInfo.pageIndex }</label> 页，共 <label>${pageInfo.pageCount }</label> 页	</div>
					
						
					  <div class="div_page_right" > 	 
					  	<c:choose>
					  		<c:when test="${pageInfo.hasPre }" >
				  			    <button onclick="subForm(1)" >首页</button>
				  	 			<button onclick="subForm(${pageInfo.pageIndex-1})">上一页</button>	
					  		</c:when>
					  		
					  		<c:otherwise>
					  			 首页
				  	 			 上一页
					  		</c:otherwise>	
					  	</c:choose>
					  	
					 	<c:choose>
					  		<c:when test="${pageInfo.hasNext}" >
				  			    <button onclick="subForm(${pageInfo.pageIndex+1})">下一页</button>
				  	 			<button onclick="subForm(${pageInfo.pageCount})">尾页</button>	
					  		</c:when>
					  		
					  		<c:otherwise>
					  			下一页 
				  	 		         尾页
					  		</c:otherwise>	
					  	</c:choose>
			
					  	  <button onclick="subForm()">转到</button>
					  	 <input type="text" name="pageIndex" id="pageIndex" value="${pageInfo.pageIndex }" /> 页
					  	
					   </div>
						
				</div>
				
				<div id="div_goods_detail">
					<img id="goods_picture" width="140" height="190" />
					<div id="div_imgdesc"></div>
				</div>
				
				</form>
	  <script type="text/javascript">
	  	 var msg='${msg}';
	  	 if(msg!=''){
	  	 	alert(msg);
	  	 }
	  </script>
  </body>
</html>
